<!--
// Copyright © 2025 Hardcore Engineering Inc.
//
// Licensed under the Eclipse Public License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
-->

<script lang="ts">
  import cardPlugin, { Card, MasterTag } from '@hcengineering/card'
  import { getClient } from '@hcengineering/presentation'
  import { Component, getPlatformColorDef, themeStore, tooltip } from '@hcengineering/ui'
  import communication from '@hcengineering/communication'

  import NotifyMarker from './NotifyMarker.svelte'

  export let card: Card
  export let count: number = 0

  const client = getClient()
  const hierarchy = client.getHierarchy()

  $: size = hierarchy.isDerived(card._class, communication.type.Direct) ? 'large' : 'medium'

  // Get the color from the card's MasterTag class, similar to MasterTagSelector
  $: clazz = hierarchy.getClass(card._class) as MasterTag
  $: color = clazz.background ?? 0
  $: platformColor = getPlatformColorDef(color, $themeStore.dark)

  function getIconStyle (platformColor: any): string {
    return `
      box-shadow: 0 2px 3px 0 ${platformColor.color};
    `
  }
</script>

<div class="card-icon" style={getIconStyle(platformColor)} use:tooltip={{ label: clazz.label }}>
  <Component is={cardPlugin.component.CardIcon} props={{ value: card, size }} />

  {#if count > 0}
    <div class="card-icon__marker">
      <NotifyMarker size="small" />
    </div>
  {/if}
</div>

<style lang="scss">
  .card-icon {
    display: inline-flex;
    position: relative;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    min-width: 2.5rem;
    min-height: 2.5rem;
    border-radius: var(--medium-BorderRadius);

    // Default fallback colors - will be overridden by inline styles
    color: var(--global-secondary-TextColor);
    background-color: var(--global-ui-BackgroundColor);
    border: 1px solid var(--global-subtle-ui-BorderColor);
    fill: var(--global-secondary-TextColor);

    &__marker {
      position: absolute;
      top: -0.375rem;
      right: 0;
      transform: translateX(calc(100% - 0.875rem));
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
</style>
